---
title: Themes
editUrl: https://github.com/toolbeam/openauth/blob/master/packages/openauth/src/ui/theme.ts
description: Reference docs for themes.
---

import { Segment, Section, NestedTitle, InlineSection } from 'toolbeam-docs-theme/components'
import { Tabs, TabItem } from '@astrojs/starlight/components'

<div class="tsdoc">
<Section type="about">
Use one of the built-in themes.
```ts
import { THEME_SST } from "@openauthjs/openauth/ui/theme"

export default issuer({
  theme: THEME_SST,
  // ...
})
```


Or define your own.


```ts
import type { Theme } from "@openauthjs/openauth/ui/theme"

const MY_THEME: Theme = {
  title: "Acne",
  radius: "none",
  favicon: "https://www.example.com/favicon.svg",
  // ...
}

export default issuer({
  theme: MY_THEME,
  // ...
})
```
</Section>
---
## Themes
### THEME_OPENAUTH
<Segment>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">...</code><code class="symbol">&rdquo;</code>
</InlineSection>
Built-in default OpenAuth theme.
</Segment>
### THEME_SST
<Segment>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">...</code><code class="symbol">&rdquo;</code>
</InlineSection>
Built-in theme based on [SST](https://sst.dev).
</Segment>
### THEME_SUPABASE
<Segment>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">...</code><code class="symbol">&rdquo;</code>
</InlineSection>
Built-in theme based on [Supabase](https://supabase.com).
</Segment>
### THEME_TERMINAL
<Segment>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">...</code><code class="symbol">&rdquo;</code>
</InlineSection>
Built-in theme based on [Terminal](https://terminal.shop).
</Segment>
### THEME_VERCEL
<Segment>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">...</code><code class="symbol">&rdquo;</code>
</InlineSection>
Built-in theme based on [Vercel](https://vercel.com).
</Segment>
## ColorScheme
<Segment>
<Section type="parameters">
- <p>[<code class="key">dark</code>](#colorscheme.dark) <code class="primitive">string</code></p>
- <p>[<code class="key">light</code>](#colorscheme.light) <code class="primitive">string</code></p>
</Section>
A type to define values for light and dark mode.
```ts
{
  light: "#FFF",
  dark: "#000"
}
```
</Segment>
<NestedTitle id="colorscheme.dark" Tag="h4" parent="ColorScheme.">dark</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>
The value for dark mode.
</Segment>
<NestedTitle id="colorscheme.light" Tag="h4" parent="ColorScheme.">light</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>
The value for light mode.
</Segment>
## Theme
<Segment>
<Section type="parameters">
- <p>[<code class="key">background?</code>](#theme.background) <code class="primitive">string</code><code class="symbol"> | </code>[<code class="type">ColorScheme</code>](#colorscheme)</p>
- <p>[<code class="key">css?</code>](#theme.css) <code class="primitive">string</code></p>
- <p>[<code class="key">favicon?</code>](#theme.favicon) <code class="primitive">string</code></p>
- <p>[<code class="key">font?</code>](#theme.font) <code class="primitive">Object</code></p>
  - <p>[<code class="key">family?</code>](#font.family) <code class="primitive">string</code></p>
  - <p>[<code class="key">scale?</code>](#font.scale) <code class="primitive">string</code></p>
- <p>[<code class="key">logo?</code>](#theme.logo) <code class="primitive">string</code><code class="symbol"> | </code>[<code class="type">ColorScheme</code>](#colorscheme)</p>
- <p>[<code class="key">primary</code>](#theme.primary) <code class="primitive">string</code><code class="symbol"> | </code>[<code class="type">ColorScheme</code>](#colorscheme)</p>
- <p>[<code class="key">radius?</code>](#theme.radius) <code class="symbol">&ldquo;</code><code class="primitive">none</code><code class="symbol">&rdquo;</code><code class="symbol"> | </code><code class="symbol">&ldquo;</code><code class="primitive">sm</code><code class="symbol">&rdquo;</code><code class="symbol"> | </code><code class="symbol">&ldquo;</code><code class="primitive">md</code><code class="symbol">&rdquo;</code><code class="symbol"> | </code><code class="symbol">&ldquo;</code><code class="primitive">lg</code><code class="symbol">&rdquo;</code><code class="symbol"> | </code><code class="symbol">&ldquo;</code><code class="primitive">full</code><code class="symbol">&rdquo;</code></p>
- <p>[<code class="key">title?</code>](#theme.title) <code class="primitive">string</code></p>
</Section>
A type to define your custom theme.
</Segment>
<NestedTitle id="theme.background" Tag="h4" parent="Theme.">background?</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code><code class="symbol"> | </code>[<code class="type">ColorScheme</code>](#colorscheme)
</InlineSection>
</Section>
The background color of the theme.

Takes a color or both light and dark colors.
```ts
{
  background: "#FFF"
}
```
</Segment>
<NestedTitle id="theme.css" Tag="h4" parent="Theme.">css?</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>
Custom CSS that's added to the page in a `<style>` tag.

This can be used to import custom fonts.
```ts
{
  css: `@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@100;200;300;400;500;600;700;800;900&display=swap');`
}
```
</Segment>
<NestedTitle id="theme.favicon" Tag="h4" parent="Theme.">favicon?</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>
A URL to the favicon of your app.
```ts
{
  favicon: "https://www.example.com/favicon.svg"
}
```
</Segment>
<NestedTitle id="theme.font" Tag="h4" parent="Theme.">font?</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">Object</code>
</InlineSection>
</Section>
The font family and scale of the theme.
</Segment>
<NestedTitle id="font.family" Tag="h5" parent="Theme.font.">family?</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>
The font family of the theme.
```ts
{
  font: {
    family: "Geist Mono, monospace"
  }
}
```
</Segment>
<NestedTitle id="font.scale" Tag="h5" parent="Theme.font.">scale?</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>

<InlineSection>
**Default** "1"
</InlineSection>
The font scale of the theme. Can be used to increase or decrease the font sizes across
the UI.
```ts
{
  font: {
    scale: "1.25"
  }
}
```
</Segment>
<NestedTitle id="theme.logo" Tag="h4" parent="Theme.">logo?</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code><code class="symbol"> | </code>[<code class="type">ColorScheme</code>](#colorscheme)
</InlineSection>
</Section>
A URL to the logo of your app.

Takes a single image or both light and dark mode versions.
```ts
{
  logo: "https://www.example.com/logo.svg"
}
```
</Segment>
<NestedTitle id="theme.primary" Tag="h4" parent="Theme.">primary</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code><code class="symbol"> | </code>[<code class="type">ColorScheme</code>](#colorscheme)
</InlineSection>
</Section>
The primary color of the theme.

Takes a color or both light and dark colors.
```ts
{
  primary: "#FF5E00"
}
```
</Segment>
<NestedTitle id="theme.radius" Tag="h4" parent="Theme.">radius?</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="symbol">&ldquo;</code><code class="primitive">none</code><code class="symbol">&rdquo;</code><code class="symbol"> | </code><code class="symbol">&ldquo;</code><code class="primitive">sm</code><code class="symbol">&rdquo;</code><code class="symbol"> | </code><code class="symbol">&ldquo;</code><code class="primitive">md</code><code class="symbol">&rdquo;</code><code class="symbol"> | </code><code class="symbol">&ldquo;</code><code class="primitive">lg</code><code class="symbol">&rdquo;</code><code class="symbol"> | </code><code class="symbol">&ldquo;</code><code class="primitive">full</code><code class="symbol">&rdquo;</code>
</InlineSection>
</Section>
The border radius of the UI elements.
```ts
{
  radius: "none"
}
```
</Segment>
<NestedTitle id="theme.title" Tag="h4" parent="Theme.">title?</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>
The name of your app. Also used as the title of the page.
```ts
{
  title: "Acne"
}
```
</Segment>
</div>